<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService"

export default {
  name: "AddImageLayer.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map, mapUtil) => {
      mapUtil.setView([
        [-0.11854216406254636, 51.50043810048564],
        [-0.09081885168461667, 51.50994770979011],
        [-0.10343596289067136, 51.50797115663946],
        [-0.07897421667485105, 51.51876102463089]
      ])

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_IMAGE_LAYER).addTo(map)
      let imageLayer = new maptalks.ImageLayer(layer, [
        {
          url: filter("relativePath2Img")("image1.png"),
          extent: [-0.11854216406254636, 51.50043810048564, -0.09081885168461667, 51.50994770979011],
          opacity: 1
        },
        {
          url: filter("relativePath2Img")("image2.png"),
          extent: [-0.10343596289067136, 51.50797115663946, -0.07897421667485105, 51.51876102463089],
          opacity: 1
        }
      ]);

      map.addLayer(imageLayer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
